<template>
  <div>
    <a-menu
      v-model:selectedKeys="current"
      mode="horizontal"
      :items="items"
    />
  </div>
</template>

<script>
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue'
import { h } from 'vue';
export default {
  name: '',
  components: {},
  data() {
    return {
      current: ['mail'],
      items: [
        {
          key: 'mail',
          icon: () => h(MailOutlined),
          label: 'Navigation One',
          title: 'Navigation One',
        },
        {
          key: 'app',
          icon: () => h(AppstoreOutlined),
          label: 'Navigation Two',
          title: 'Navigation Two',
        },
        {
          key: 'sub1',
          icon: () => h(SettingOutlined),
          label: 'Navigation Three - Submenu',
          title: 'Navigation Three - Submenu',
          children: [
            {
              type: 'group',
              label: 'Item 1',
              children: [
                {
                  label: 'Option 1',
                  key: 'setting:1',
                },
                {
                  label: 'Option 2',
                  key: 'setting:2',
                },
              ],
            },
            {
              type: 'group',
              label: 'Item 2',
              key: 'Item 2',

              children: [
                {
                  label: 'Option 3',
                  key: 'setting:3',
                },
                {
                  label: 'Option 4',
                  key: 'setting:4',
                },
              ],
            },
            {
              //type: 'group',
              label: 'Item 3',
              key: 'Item 3',
            },
          ],
        },
        {
          key: 'alipay',
          label: h(
            'a',
            {
              href: 'https://antdv.com',
              target: '_blank',
            },
            'Navigation Four - Link',
          ),
          title: 'Navigation Four - Link',
        },
      ],
    }
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
